<template>
    <div class="app-container summarys-sales-content">
        <FilterForm :data="filterData" @search="getList" labelWidth="86px" />
        
        <div class="sales-center">
            <el-tabs
                tab-position="left"
                style="height: 80vh"
                @tab-click="handleClick"
                v-model="activeName"
            >
                <el-tab-pane
                    v-for="(item, index) in salesNameList"
                    :key="index"
                    :label="item"
                    :name="String(index)"
                    />
            </el-tabs>

            <Table
                :api="$Api.sales.summarizing.sales"
                :params="params"
                :selection="false"
                height="80vh"
                ref="Table"
                :summary="true">
                <el-table-column label="业务员" align="center" prop="subSalesName" width="120" />
                <el-table-column label="品名" align="center" prop="goodsName"  />
                <el-table-column label="件数" align="center" prop="pieceCountSum" width="120" />
                <el-table-column label="方数" align="center" prop="sliceCountSum" width="120" />
                <el-table-column label="单价" align="center" prop="includedTaxPriceSum" width="120" />
                <el-table-column label="金额" align="center" prop="moneySum"  />
        
            </Table>
        </div>
    </div>
</template>

<script>

export default {
    data: () =>{
        return{
           filterData:[
               {
                    label: "日期",
                    type: "period_date",
                    st: "beginRegisterTime",
                    end: "endRegisterTime",
                    scale: 2,
                },
                {
                    label: "业务员",
                    name: "subSalesName",
                    type: "sales",
                },
           ],
           params: {
                subSalesName: '宋天山',
                pageSize: 100,
            },
           salesNameList:[],
           activeName: '4'
        }
    },
    created(){
        let { salesNameList } = this;
        this.$Api.user.list().then( (res)=>{
            let { rows } = res;
            rows.forEach( (v)=>{
                 salesNameList.push(v.nickName)
            })
        })
    },
    methods:{
        getList(params) {
            this.$refs.Table.getData(params);
        },
        handleClick(tab, event){
            let { params } = this;
            let name = tab.label;
            params.subSalesName = name;
            this.$nextTick( () =>{
                this.$refs.Table.getData();
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    ::v-deep.summarys-sales-content{
    .sales-center{
      display: flex;
    }
    .el-tabs--left, .el-tabs--right{
      overflow: visible;
    }
}
</style>